<template>
    <section>
        <h1>状态介绍</h1>
        <ul>
            <li v-for="item in stateIntroList">
                <State :type="item.type" size="min(30px,3vw)" sup="?"></State>
                <span>（{{ item.name }}）:{{ item.intro }}</span>
            </li>
        </ul>
    </section>
</template>

<script lang="ts" setup>
import State from '@/components/game/state.vue';
import { stateIntroList } from '@/game/intro/state';
</script>

<style scoped>
section {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5vh 0.5vw;
}

li {
    display: flex;
    align-items: center;
    margin: 0.5vh 0;
    padding: 0.3vh 0.3vw;
    background-color: gray;
    border-radius: 5px;
}
</style>